import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Icon, Alert, Form, Input, Button, message } from 'antd';

import API from '../../../api/account/index';
// import Codes from '../../../utils/code';

import './SetPassword.scss';

const FormItem = Form.Item;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 16,
    },
  },
};

class SetPassword extends Component {
  state = {
    message: '密码长度不小于6个字符，字符类型必须是数字和字母的组合',
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll(async (err, values) => {
      if (err) return;
      const { oldPassword, newPassword } = values;
      const response = await API.modifyPassword(oldPassword, newPassword);
      const { code } = response;
      if (code === 1) {
        message.success('密码修改成功');
      } else {
        // message.error(Codes[code]);
      }
    });
  }
  validateNewPassword = (rule, value, callback) => {
    const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
    if (!reg.test(value)) {
      callback('密码格式错误');
    }
    callback();
  }
  confirmToNewPassword = (rule, value, callback) => {
    const { form } = this.props;
    const newPassword = form.getFieldValue('newPassword');
    if (value !== newPassword) {
      callback('与新密码输入不一致');
    }
    callback();
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <main>
        <div className="content-title"><Icon type="left" style={{ marginRight: 10, cursor: 'pointer' }} onClick={this.props.togglePasswordEdit} />密码设置</div>
        <div className="set-password">
          {
            this.state.message ? (
              <div>
                <Alert message={this.state.message} type="info" />
              </div>
            ) : null
          }
          <Form onSubmit={this.handleSubmit}>
            <FormItem
              {...formItemLayout}
              label="当前密码"
            >
              {getFieldDecorator('oldPassword', {
                rules: [{
                  required: true, message: '请输入当前密码!',
                }, {
                  validator: this.validateOldPassword,
                }],
              })(<Input type="password" />)}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="新密码"
            >
              {getFieldDecorator('newPassword', {
                rules: [{
                  required: true, message: '请输入新密码',
                // }, {
                //   validator: this.validateNewPassword,
                }, {
                  pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/, message: '密码格式错误',
                }],
              })(<Input type="password" />)}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="再次输入新密码"
            >
              {getFieldDecorator('confirmPassword', {
                rules: [{
                  required: true, message: '请再次输入新密码!',
                }, {
                  validator: this.confirmToNewPassword,
                }],
              })(<Input type="password" />)}
            </FormItem>
            <FormItem {...tailFormItemLayout}>
              <Button type="default" htmlType="button" style={{ marginRight: 10 }} onClick={this.props.togglePasswordEdit}>取消</Button>
              <Button type="primary" htmlType="submit">确认</Button>
            </FormItem>
          </Form>
        </div>
      </main>
    );
  }
}

SetPassword.propTypes = {
  togglePasswordEdit: PropTypes.func.isRequired,
  form: PropTypes.object.isRequired,
};

const WrappedSetPasswordForm = Form.create({})(SetPassword);

export default WrappedSetPasswordForm;
